<template>
	<view class="content">
		<view class="showbox">
			<view class="logohe">
				<view class="icongo">
				<image src="https://xixijj.oss-cn-chengdu.aliyuncs.com/attach/2023/08/75256202308221334537899.png" mode="widthFix"></image>
				</view>
				<text>迷彩同城</text>
			</view>
			<image src="https://xixijj.oss-cn-chengdu.aliyuncs.com/store/comment/888b7202309211456376926.png" mode="widthFix"></image>
		</view>
		<view class="loginbtn">
			<button @click="trigger" :open-type="show?'':'getPhoneNumber'" @getphonenumber="onGetPhoneNumber">手机号一键登录</button>
		</view>
		<view class="login-footer">
			<label class="radio" @click="showbtn"><radio :disabled="show" checked="true" style="transform:scale(0.6)" color="#025E21"/>我已经阅读并同意</label>
			<view class="contract">
				迷彩同城 <navigator :class="{state:show}" url="../page_my/privacypact?type=4">《用户注册协议》</navigator> 和 <navigator :class="{state:show}" url="../page_my/privacypact?type=3">《《隐私政策》</navigator>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import '@/style/fonts/font.css'
	import http from '@/utils/http.js'
	import {mapMutations} from 'vuex'
	import {getopenid} from '@/api/place.js'
	export default{
		data(){
			return{
				show:true,
				token:'',
				type:'',
				code:''
			}
		},
		methods:{
		...mapMutations(['setToken','setopenid']),
		onGetPhoneNumber(e){
			if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  
			  //拒绝授权后弹出一些提示  
			  this.$refs.uToast.show({
				  message:"已取消绑定登录",
				  type:"default",
				  position:"top"
			  })
			} else { 
			//允许授权
			this.wxlogin()
			this.login(e.detail.code)
			// 跳转
			uni.switchTab({url:'/pages/index/index'})
			}
		},
		trigger(){
			if(this.show){
				this.$refs.uToast.show({
				  message:"请阅读并确认同意用户协议~",
				  type:"default",
				  position:"top"
				})
			}
		},
		wxlogin(){
			uni.login({
				provider:'weixin',
				success:(res) => {
					this.openid(res.code)
				},
				fail: (err) => {
					return err
				}
			})
		},
		showbtn(){
			this.show = !this.show
		},
		async login(code){
			const res = await http({
				url:'/login',
				method:'POST',
				data:{
					code
				}
			}) 
			this.setToken(res.data.token)
		},
		async openid(code){
			const {data} = await getopenid(code)
			this.setopenid(data.openid)
		}
		}
	}
</script>

<style lang="scss">
	.content{
		flex-shrink: 0;
		padding: 0 40rpx;
		padding-top: 220rpx;
		.showbox{
			text-align: center;
			margin-bottom: 60rpx;
			.logohe{
				display: flex;
				align-items: center;
				justify-content: center;
				// font-weight: bold;
				font-family: Regular;
				font-size: 80rpx;
				display: flex;
				.icongo{
					margin-right: 30rpx;
					image{
						width: 120rpx;
					}
				}
			}
		}
		.loginbtn{
			button{
				color: #fff;
				font-size: 32rpx;
				background-color: #025E21;
			}
		}
		.login-footer{
			margin-top: 20rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.radio{
				display: flex;
				align-items: center;
			}
			.contract{
				margin-top: 16rpx;
				display: flex;
				navigator{
					color: #025E21;
				}
				.state{
					color: #999;
				}
			}
		}
	}
</style>